<template>
  <div>
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="formInline"
      :rules="rules"

      label-width="120px"
    >
      <el-form-item :label="`${$t('workOrder')}`" prop="workOrder">
        <el-input
          v-model="formInline.workOrder"
          clearable
          @keydown.enter.native="getPartsInfo"
        />
      </el-form-item>
      <el-form-item :label="`${$t('eqpName')}`" prop="eqpId">
        <el-select v-model="formInline.eqpId" filterable clearable>
          <el-option
            v-for="item in handleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <div v-if="isShow">
        <el-form-item :label="`${$t('productName')}`" prop="productName">
          <el-input v-model="formInline.productName" clearable/>
        </el-form-item>
        <el-form-item :label="`${$t('customer')}`" prop="customerCode">
          <el-input v-model="formInline.customerCode" clearable/>
        </el-form-item>
        <el-form-item :label="`${$t('packageType')}`" prop="packageType">
          <el-input v-model="formInline.packageType" clearable/>
        </el-form-item>
        <el-form-item :label="`${$t('processFlow')}`" prop="processFlow">
          <el-select v-model="formInline.processFlow" clearable>
            <el-option
              v-for="item in processflowList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <el-row>
      <el-col>
        <div class="footer-btns">
          <el-button

            icon="el-icon-circle-close"
            @click="$emit('handleClose')">{{
              $t("cancel")
            }}</el-button>
          <el-button
            type="primary"

            icon="el-icon-receiving"
            @click="doGenerate('ruleForm')"
          >生成</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import eqpbaseApi from '@/api/equipment/eqpbase'
import toolingPreLendApi from '@/api/Tooling/toolingPreLend'
import toolingKitApi from '@/api/Tooling/toolingKit'
import networkTips from '@/mixins/networkTips'
export default {
  name: 'CollectForm',
  components: {},
  mixins: [networkTips],
  props: {},
  data() {
    return {
      rules: {
        workOrder: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('workOrder')}`, trigger: 'blur' }],
        eqpId: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('eqpName')}`, trigger: 'blur' }],
        productName: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('productName')}`, trigger: 'blur' }],
        customerCode: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('custName')}`, trigger: 'blur' }],
        packageType: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('packageType')}`, trigger: 'blur' }],
        processFlow: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('processFlow')}`, trigger: 'change' }]
      },
      formInline: {},
      isShow: false,
      handleList: [],
      processflowList: [],
      formInfo: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getHandleList()
    this.getProcessFlowList()
  },
  mounted() {},
  methods: {
    // enter查询数据
    async getPartsInfo(val) {
      const res = await toolingPreLendApi.getPartsInfo({ workOrder: this.formInline.workOrder })
      this.netTips(res, this.doShowItem)
      this.formInline = Object.assign({}, this.formInline, res.data)
    },
    // 点击生成
    doGenerate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formInline.processFlowName = this.processflowList.find(ele => ele.id === this.formInline.processFlow).name
          toolingPreLendApi.createForm(this.$clearNull(this.formInline)).then(res => {
            this.formInfo = res.data
            this.netTips(res, this.handleUpdate, this.handleFormInfo)
          })
        } else {
          return false
        }
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('doGenerate')
    },
    // 传递table参数
    handleFormInfo() {
      this.$emit('getFormInfo', this.formInfo)
    },
    // 获取设备名称
    async getHandleList() {
      const res = await eqpbaseApi.getHandleList()
      this.handleList = res.data
    },
    // 获取生产流程
    async getProcessFlowList() {
      const res = await toolingKitApi.getProcessFlowList()
      this.processflowList = res.data
    },
    // 展示更多formitem
    doShowItem() {
      this.isShow = true
    },
    // 清空表单
    emptyForm() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    ::v-deep .el-input__inner {
      width: 250px;
    }
  }
}
.footer-btns{
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
